<!--
 * @Author: 橘子
 * @Date: 2022-12-10 19:46:56
 * @Project_description: 富文本
 * @Description: 代码是我抄的，不会也是真的
-->
<template>
  <!--  todo:使用d2admin的d2-container不能带自定义滚动条，否则无法选中'-->
  <div style='z-index: 999999'>
    <Toolbar
      v-if='!readOnly'
      :defaultConfig='toolbarConfig'
      :editor='editor'
      :mode='mode'
      style='border-bottom: 1px solid #ccc' />
    <Editor
      v-model='html'
      :defaultConfig='editorConfig'
      :mode='mode'
      style='height: 500px; overflow-y: hidden'
      @onBlur='onBlur'
      @onChange='onChange'
      @onCreated='onCreated'
      @onFocus='onFocus' />
  </div>
</template>

<script>
import { Boot, DomEditor } from '@wangeditor/editor'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import linkCardModule from '@wangeditor/plugin-link-card'
import attachmentModule from '@wangeditor/plugin-upload-attachment'
import Vue from 'vue'
import { editorConfig, toolbarConfig } from './config'
// import  {UploadImageList} from './ModalMenu'
export default Vue.extend({
  components: { Editor, Toolbar },
  props: {
    // 富文本内容
    value: {
      type: String,
      default: '',
    },
    // 占位符
    placeholder: {
      type: String,
      default: '请输入内容',
    },
    // 只读 只读状态可通过 editor.enable() 和 editor.disable() 切换
    readOnly: {
      type: Boolean,
      default: false,
    },
    //配置编辑器默认是否 focus ，默认为 true
    autoFocus: {
      type: Boolean,
      default: false,
    },
    //配置编辑器是否支持滚动，默认为 true 。注意，此时不要固定 editor-container 的高度，设置一个 min-height 即可。
    //https://www.wangeditor.com/demo/zh-CN/like-qq-doc.html
    scroll: {
      type: Boolean,
      default: false,
    },
    mode: {
      type: String,
      default: 'default', // or 'simple'
    },
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: toolbarConfig,
      editorConfig: editorConfig,
    }
  },
  created() {
    this.createModalMenu()
  },
  methods: {
    //创建编辑器
    onCreated(editor) {
      this.mergeConfig()
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      if (this.value) {
        this.editor.setHtml(this.value)
      }
      setTimeout(() => {
        const toolbar = DomEditor.getToolbar(editor)
        const curToolbarConfig = toolbar.getConfig()
        console.log(curToolbarConfig.toolbarKeys) // 当前菜单排序和分组
      })
    },
    createModalMenu() {
      //上传附件
      Boot.registerModule(attachmentModule)
      // 链接卡片
      Boot.registerModule(linkCardModule)
      // const uploadImageList = {
      //   key: 'uploadImageList', // 定义 menu key ：要保证唯一、不重复（重要）
      //   factory() {
      //     return new UploadImageList()
      //   },
      // }
      // Boot.registerMenu(uploadImageList)
    },
    //https://www.wangeditor.com/v5/API.html#config-%E7%9B%B8%E5%85%B3 编辑器api
    //合并配置
    mergeConfig() {
      this.editorConfig.placeholder = this.placeholder
      this.editorConfig.readonly = this.readOnly
      this.editorConfig.autofocus = this.autoFocus
      this.editorConfig.scroll = this.scroll
    },
    //修改编辑器内容
    onChange() {
      this.$emit('input', this.html)
    },
    //编辑器聚焦
    onFocus() {
      this.$emit('focus')
    },
    //编辑器失焦
    onBlur() {
      this.$emit('blur')
    },
  },
  //销毁
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
})
</script>

<style src='@wangeditor/editor/dist/css/style.css'></style>
<style lang='scss' scoped></style>
